<template>
    <div class=" bg-stone-100">
        <div class="relative">
            <n-image src="/image/抽象科技.jpg" object-fit="cover" width="100%" :preview-disabled="true" />
            <div class="w-128 absolute bottom-10 left-1/2 transform -translate-x-1/2 ">
                <n-grid x-gap="12" :cols="12">
                    <n-gi :span="1"/>
                    <n-gi :span="7">
                        <n-select placeholder="请选择回测的场景" class="shadow-xxxl" v-model:value="curr_scenario_id" :options="scenario_list" />
                    </n-gi>
                    <n-gi :span="2">
                        <n-button @click="goto('backtest')" class="shadow-xxxl" color="rgb(26,70,204)">回测一下</n-button>
                    </n-gi>
                </n-grid>
            </div>
        </div>
        <div class="flex justify-center">
            <div class="w-3/4">
                <div class="py-4">
                    <n-space justify="space-around">
                        <NavigateComponent v-for="i in navigate_conf" :key="i.id" :conf="i"/>
                    </n-space>
                </div>
                <div class="py-3">
                    <n-grid item-responsive x-gap="12" y-gap="12" :cols="12">
                        <n-gi span="12 400:12 800:8">
                            <n-card title="热门回测场景">
                                <n-scrollbar style="max-height: 300px">

                                    <n-table :bordered="false" striped>
                                        <tbody>
                                            <template v-for="item in event_list" :key="item.id">
                                                <tr>
                                                    <td>{{ item }}</td>

                                                </tr>
                                            </template>

                                        </tbody>
                                    </n-table>
                                </n-scrollbar>
                            </n-card>
                        </n-gi>
                        <n-gi span="12 400:12 800:4">
                            <n-card title="推荐策略">
                                <n-scrollbar style="max-height: 300px"> <n-table :bordered="false" striped>
                                        <tbody>

                                            <template v-for="item in strategy_list" :key="item.id">
                                                <tr>
                                                    <td>{{ item }}</td>

                                                </tr>
                                            </template>

                                        </tbody>
                                    </n-table></n-scrollbar>

                            </n-card>
                        </n-gi>
                    </n-grid>
                </div>

            </div>
        </div>

    </div>


</template>

<script setup>
import { onMounted, ref } from 'vue';
import NavigateComponent from '@/components/NavigateComponent.vue';
import { useScenarioStore } from '@/stores/scenarioStore';
import { useRouter } from 'vue-router';
const router = useRouter();

const goto = function(url){
    router.replace({
        path:'/'+url
    });
}
const scenarioStore = useScenarioStore();
const navigate_conf = [
    {
        color:"rgb(235,197,101)",
        title:"场景",
        introduction:"定制化场景配置",
        buttontext:"配置场景",
        icon:"InsertPhotoFilled",
        url:"scenario"
    },
    {
        color:"rgb(16,154,70)",
        title:"回测",
        introduction:"策略设置于回测",
        buttontext:"开始回测",
        icon:"ArrowTrendingLines20Regular",
        url:'backtest'
    },
    {
        color:"rgb(26,104,184)",
        title:"分析",
        introduction:"基于历史数据分析与预测",
        buttontext:"分析一下",
        icon:"BrainCircuit20Regular",
        url:'analyzer'
    }
]

const scenario_list = ref([]);

onMounted(async()=>{
await scenarioStore.getScenarioList();
let temp_scenario_list =  JSON.parse(JSON.stringify(scenarioStore.scenario_list));
for(let i of temp_scenario_list){
    scenario_list.value.push({
        label:i.name,
        value:i.id
    })
}
}
)



const curr_scenario_id = ref(null);
const event_list = ref([
    '深证成指连涨天数大于3', '上证指数上穿5日均线', '十一黄金周前五天', '美联储会议', '人工智能登上微博热搜', '美联储会议', '人工智能登上微博热搜', '美联储会议', '人工智能登上微博热搜'
])
const strategy_list = ref([
    '中证1000，筹码度+中轨', '校服放量上涨', '中证1000均线策略', '校服放量上涨', '中证1000均线策略', '校服放量上涨', '中证1000均线策略'
])
</script>